<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>客户导入</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
			@import url("//unpkg.com/iview/dist/styles/iview.css");
			p{
			font-size:15px;
			}
		</style>
	</head>
	<body>
	 <div class="boxEmp">
	 	<h2 style="font-weight:bold" class="el-icon-sold-out">客户•公海客户导入工具</h2>
	 	<p></p>
	 	<p></p>
	 	<p>上传xls/xlsx文件，完成导入</p>
	 	<el-upload 
	  class="upload-demo"
	  action="http://localhost:8080/customer/importcustomer"
	  name="importcustomer"
	  :on-preview="handlePreview"
	  :on-remove="handleRemove"
	  :before-remove="beforeRemove" multiple
	  :limit="3"
	  :on-exceed="handleExceed"
	  :file-list="fileList">
	  <el-button size="small" type="primary">客户导入</el-button>
	</el-upload>
	<br/>
	<div slot="tip" class="el-upload__tip">
		<p style="font-weight:bold">注意：1.上传填写好的内容excel文件</p>
		<p style="font-weight:bold">2.只能上传xls/.xlsx文件，且不超过500kb</p>
	</div>
	<p>导入的客户将全部进入公海</p>
	</div>
    </body>
    <script type="text/javascript">
			var vm = new Vue({
				el: ".boxEmp",
				data() {
					return {
						radio: 'inOrOut',
						fileList:[]
					};
				},
				methods: {
				      beforeRemove(file, fileList) {
				          return this.$confirm(`确定移除 ${ file.name }？`);
				        },
				        handleRemove(file, fileList) {
				            console.log(file, fileList);
				          },
				      handlePreview(file) {
				        console.log(file);
				      },
				      handleExceed(files, fileList) {
				    	  this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
				      }
				}
			})
		</script>
</html>
